<template>
  <div class="page">
    <OtherHeader centerTitle pageTitle="员工意见建议平台"></OtherHeader>
    <div class="contain_wrap wrapper">
      <div class="content">
        <div class="more">
          <h6>咨询公告</h6>
          <span @click="into('noticelist')">更多</span>
        </div>
        <li class="news_item" v-for="(item,index) in newsData" :key="item.id+'_'+index">
          <span @click="intoDetail(item.id,item.name)"><span class="row_flag">●</span>{{ item.name }}</span>
        </li>
        <van-empty
            class="custom-image"
            v-if="newsData.length===0"
            :image="emptyImage"
            description="暂无内容"
        />
        <div class="more">
          <h6>我的建议</h6>
          <span></span>
        </div>
        <div class="search">
          <input v-model="phoneNumber" class="search_input" type="tel" placeholder="请输入手机号" />
          <svg v-if="phoneNumber!==''" @click="clearWord" class="del_key"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="77559"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m0-572.330667L300.629333 240.213333a42.538667 42.538667 0 0 0-60.16 0.213334 42.410667 42.410667 0 0 0-0.213333 60.16L451.669333 512 240.213333 723.370667a42.538667 42.538667 0 0 0 0.213334 60.16 42.410667 42.410667 0 0 0 60.16 0.213333L512 572.330667l211.370667 211.413333a42.538667 42.538667 0 0 0 60.16-0.213333 42.410667 42.410667 0 0 0 0.213333-60.16L572.330667 512l211.413333-211.370667a42.538667 42.538667 0 0 0-0.213333-60.16 42.410667 42.410667 0 0 0-60.16-0.213333L512 451.669333z" fill="#3D3D3D" p-id="77560"></path></svg>
          <div class="search_btn" @click="intoMySug"><svg t="1743606872385" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M959.266 879.165c0 81.582-81.582 81.582-81.582 81.582l-233.38-233.381c-60.529 43.977-134.777 70.217-215.318 70.217-202.755 0-367.117-164.362-367.117-367.117S226.23 63.349 428.985 63.349s367.117 164.362 367.117 367.117c0 80.541-26.241 154.785-70.217 215.318l233.381 233.381zM428.985 144.931c-157.697 0-285.536 127.838-285.536 285.536s127.838 285.536 285.536 285.536 285.536-127.838 285.536-285.536-127.839-285.536-285.536-285.536z" fill="#1d66bb" p-id="1520"></path></svg></div>
        </div>
        <div class="write">
          <svg @click="into('leavemessage')" t="1743607227957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2614"><path d="M861.428838 256.64727c2.413056 5.362074 4.346163 11.614515 5.808538 18.76439 1.49207 7.146803 2.232934 14.593331 2.232934 22.336717 0 7.743386-1.487974 15.481549-4.468941 23.224934-2.988134 7.745434-7.754957 15.191962-14.291046 22.336717-7.149158 7.150899-13.550182 13.402214-19.212288 18.762342-5.659136 5.361152-10.572186 10.126643-14.743347 14.296576-4.7616 4.764467-9.231667 8.935526-13.401805 12.506829L636.272845 221.804646c7.146086-6.552269 15.635763-14.44393 25.460941-23.679283 9.82825-9.232282 18.021171-16.525414 24.572621-21.888512 8.340275-6.551245 16.979354-11.167334 25.914266-13.850419 8.932762-2.677965 17.72032-3.870106 26.355302-3.571302 8.63703 0.299827 16.974234 1.639322 25.019802 4.020531 8.040448 2.382234 15.036006 5.061222 20.990874 8.042189 12.514509 6.557389 26.36247 18.01943 41.552077 34.397389C841.324134 221.652173 853.092659 238.780314 861.428838 256.64727L861.428838 256.64727zM165.404774 692.651418c3.572531-3.57335 11.91383-12.06272 25.015706-25.46391 13.105971-13.403238 29.487821-29.929677 49.141146-49.587405l65.228186-65.217331 72.373248-72.370278 192.09984-192.094003 167.07799 167.967539L544.243098 647.977984l-71.47776 72.370278c-23.826637 23.22903-45.270835 44.52608-64.331776 63.882957-19.059814 19.358925-34.848051 35.289702-47.355392 47.798682-12.510413 12.507853-19.956326 19.65568-22.337638 21.443379-5.952819 5.360128-12.808192 11.017933-20.547789 16.972595-7.742669 5.960806-15.783117 10.72425-24.12544 14.296576-8.336179 4.170957-20.549837 9.231258-36.634829 15.18889-16.080896 5.955686-32.907776 11.762893-50.480742 17.421824-17.56887 5.662003-34.247373 10.574848-50.036634 14.745805-15.784141 4.163789-27.545498 6.849024-35.290112 8.037069-16.086016 1.787699-26.804531-0.595558-32.166912-7.146803-5.360333-6.549197-6.849229-17.568154-4.467917-33.057894 1.192243-8.33792 4.023808-20.396544 8.490701-36.184064 4.467917-15.785472 9.231667-32.162509 14.29207-49.140224 5.065523-16.972595 9.977651-32.60969 14.745395-46.904218 4.764672-14.293504 8.633958-24.123392 11.614003-29.48352 3.574579-8.336896 7.596339-15.932928 12.062208-22.782874C150.663475 708.583219 157.068595 700.991386 165.404774 692.651418L165.404774 692.651418zM165.404774 692.651418M463.329075 861.160243l79.902003 0 0 79.548723-79.902003 0 0-79.548723ZM625.668915 861.160243l79.902003 0 0 79.548723-79.902003 0 0-79.548723ZM788.655514 861.160243l79.902003 0 0 79.548723-79.902003 0 0-79.548723Z" p-id="2615" fill="#1d66bb"></path></svg>
          <span  @click="into('leavemessage')">我要提建议</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OtherHeader from "@/components/OtherHeader";
import BScroll from "better-scroll";
import axios from "axios";

export default {
  name: 'ZWT',
  data() {
    return {
      newsData: [
        {id: 0, date: "04-20", title: "崇州市政务中心物业服务招标公告崇州市政务中心物业服务招标公告"},
        {id: 1, date: "05-20", title: "崇州市政务中心物业服务"},
        {id: 2, date: "05-21", title: "崇州市政务中心物业服务招标公告"}
      ],
      loadStatus:true,
      emptyImage: require("../assets/empty.png"),
      phoneNumber:""
    }
  },
  mounted() {
    this.$nextTick(() => {
      var scrollCom=new BScroll(document.querySelector(".wrapper"), {
        probeType: 3,
        click: true,
        pullUpLoad: true
      });
      scrollCom.on('scroll', (pos) => {
        // 下拉分段加载
        if (pos.y < 50 && this.loadStatus) {
          console.log("loading more...")
          this.loadStatus = false
        }
      })
    })
  },
  created() {
    this.getNotice()
  },
  methods:{
    getNotice(){
      const url = "http://8.155.49.183/api/tfxq/findVideoList";
      axios.get(url,{},{
        headers: {
          'Content-Type': 'multipart/form-data' // 不需要设置Content-Type，axios会自动设置，但如果需要自定义，可以添加此行。默认情况下不需要设置。
        }
      }).then(response => {
        if(response.data.data.length>0){
          this.newsData = response.data.data.slice(0, 3);
        }else{
          this.newsData = []
        }
      }).catch(error => {
        console.log("notice data error!",error)
        this.$toast('获取公告数据错误！');
        this.newsData = []
      });
    },
    clearWord(){
      this.phoneNumber = ""
    },
    into(path){
      this.$router.push({
        path: '/'+path,
        query: {
        }
      })
    },
    intoDetail(id,tit){
      this.$router.push({
        path: '/noticedetail',
        query: {
          id:id,
          title:tit
        }
      })
    },
    intoMySug(){
      if(this.phoneNumber==""){
        this.$toast('请输入您的手机号码！');
      }else if(this.phoneNumber.length<11 || this.phoneNumber.length>11){
        this.$toast('手机号码有误！');
      }else{
        this.$router.push({
          path: '/mysuggestion',
          query: {
            phone:this.phoneNumber
          }
        })
      }
    },
  },
  components: {OtherHeader}
}
</script>

<style lang="scss" scoped>
.contain_wrap {
  width: 100vw;
  height: 100vh;
  margin-top: 3.34rem;
  text-align: center;
  overflow: hidden;

  .content {
    width: 100%;
    padding-bottom: 6.68rem;
    .more{
      width:100%;
      height:2.4rem;
      margin:0 auto;
      background:$sColor;
      display: flex;
      align-items: center;
      h6{
        flex:1;
        text-align: left;
        padding:0 1rem;
        font-size: $mText;
        font-weight: bold;
        color:$mColor
      }
      span{
        font-size: $sText;
        color:$vColor;
        padding-right: 1rem;
      }
    }
    .search{
      width:92%;
      height:2.8rem;
      background:$sColor;
      margin:1.5rem auto;
      border-radius: $mRadius;
      border:solid 1px $rColor;
      display: flex;
      overflow: hidden;
      position: relative;
      .search_input{
        flex:1;
        text-align: left;
        padding-left: 0.5rem;
      }
      .del_key{
        position: absolute;
        right: 5rem;
        top:0.9rem;
        width:1rem;
        height:1rem;
        opacity: 0.5;
      }
      .search_btn{
        width:4.4rem;
        height:2.8rem;
        background: $oColor;
        text-align: center;
        .icon{
          width:1.8rem;
          height:1.8rem;
          padding-top: 0.5rem;
        }
      }
    }
    .write {
      width: 92%;
      height: 2.8rem;
      margin: 1.2rem auto;
      color:$mColor;
      font-size: $mText;
      .icon{
        width:1.3rem;
        height:1.3rem;
        position: relative;
        top:0.12rem;
        padding-right: 0.3rem;
      }
    }
    .news_item {
      width: 92%;
      height: 3.6rem;
      margin:0 auto;
      line-height: 3.6rem;
      text-align: left;
      overflow: hidden;
      font-size: $mText;
      color: $tColor;
      white-space: nowrap;
      text-overflow: ellipsis;
      border-bottom:1px dotted $sColor;
      .row_flag {
        display: inline-block;
        height: 1.28rem;
        line-height: 1.44rem;
        padding: 0 0.26rem;
        margin-right: 0.26rem;
        color: $mColor;
        font-size: $sText;
      }
    }
  }
}
</style>
